<template>
  <div class="outer" v-show="$store.state.isShowTab">
    <ul>
      <router-link tag="li" to="/film" active-class="item-select">
        <i class="iconfont icon-film"></i>电影
      </router-link>
      <router-link tag="li" to="/cinema" active-class="item-select">
        <i class="iconfont icon-yingyuan"></i>影院
      </router-link>
      <router-link tag="li" to="/infor" active-class="item-select">
        <i class="iconfont icon-news1"></i>资讯
      </router-link>
      <router-link tag="li" to="/mine" active-class="item-select">
        <i class="iconfont icon-mine1"></i>我的
      </router-link>
    </ul>
  </div>
</template>
<script>
export default {
  name: "TarBar",
};
</script>
<style lang="less" scoped>
.outer {
  ul {
    display: flex;
    position: fixed;
    z-index: 999;
    background: white;
    bottom: 0;
    height: 49px;
    max-width: 750px;
    width: 100%;
    li {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      list-style: none;
      text-align: center;
      font-size: 10px;
    }
    .item-select {
      color: #ff5f16;
    }
  }
}
</style>